<template>
  <div class="addDep">
    <el-dialog :title="showTitle" :visible="showDialog" width="40%" @close="close">
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select v-model="form.manager" placeholder="请选择" @focus="getEmployee">
            <el-option v-for="item in employeeList" :key="item.id" :label="item.username" :value="item.username" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="form.introduce" type="textarea" resize="none" rows="3" placeholder="请输入部门介绍(1-300字)" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addDepartment, getDepartmentDetail, getDepartmentList, eidtDepartmentDetail } from '@/api/departments'
import { getEmployeeList } from '@/api/employees'
export default {
  name: 'AddDepartment',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    nodeDate: {
      type: Object,
      required: true
    }
  },
  data() {
    // 校验部门名字不能与同级别部门名字重复
    const checkName = async(rule, value, callback) => {
      const { depts } = await getDepartmentList()
      let res
      /* 思路:
            1、判断是编辑部门还是新增部门
            2、如果是编辑部门,且输入的部门名字没有改变 直接校验通过
            3、如果是编辑部门,输入的部门名字改变了,就让res过滤兄弟部门
            4、判断兄弟部门是否有和当前输入的部门名字重复的,有则返回错误 没有则通过
            5、如果是新增部门,直接让res过滤当前部门下的子部门然后判断是否重复
       */
      if (this.form.id) {
        if (value === this.nodeDate.name) {
          return callback()
        } else {
          res = depts.filter(item => item.id === this.nodeDate.id)
        }
      } else {
        res = depts.filter(item => item.pid === this.nodeDate.id)
      }
      // console.log(depts)
      res.some(item => item.name === value) ? callback(new Error(`${value}已经存在了`)) : callback()
    }
    const checkCode = async(rule, value, callback) => {
      // 修改模式下,如果输入的部门编码和当前部门的编码一致,直接通过就可以
      if (this.form.id) {
        if (value === this.nodeDate.code) return callback()
      }
      const { depts } = await getDepartmentList()
      depts.some(item => item.code === value) ? callback(new Error('部门编码重复')) : callback()
    }
    return {
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空' },
          { max: 50, message: '长度为1-50位' },
          { validator: checkName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空' },
          { max: 50, message: '长度为1-50位' },
          { validator: checkCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空' }
        ],
        introduce: [
          { required: true, message: '部门负责人不能为空' },
          { max: 300, message: '部门介绍不能超过300字' }
        ]
      },
      employeeList: []
    }
  },
  computed: {
    showTitle() {
      return this.form.id ? '编辑部门' : '添加部门'
    }
  },
  methods: {
    close() {
      this.$emit('update:showDialog', false)
      // 重置整个表单并移除校验效果
      this.$refs.form.resetFields()
      // 保险起见，给form重新赋值为空
      this.form = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
    },
    // focus事件获取员工简单列表
    async getEmployee() {
      this.employeeList = await getEmployeeList()
      // console.log(this.employeeList)
    },
    async add() {
      // console.log('111')
      try {
        await this.$refs.form.validate()
      } catch {
        return
      }
      if (this.form.id) {
        await eidtDepartmentDetail(this.form)
        this.$message.success('修改成功')
      } else {
        await addDepartment({
          ...this.form,
          pid: this.nodeDate.id
        })
        this.$message.success('添加成功')
      }
      this.$emit('update:showDialog', false)
      this.$emit('updateDep')
    },
    async getInfo(id) {
      this.form = await getDepartmentDetail(id)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__header {
  background-image: linear-gradient(to left, #0093E9, #80D0C7);
  }
}
.el-button--primary {
    background-image: linear-gradient(to left, #0093E9, #80D0C7);
}

</style>
